<template>
  <div class="add-goods">
    <h3>新增农产品</h3>
    <el-form 
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      label-position="left"
      style="max-width: 800px"
    >
      <!-- 农产品名称 -->
      <el-form-item label="农产品名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入商品名称" />
      </el-form-item>

      <!-- 产地 -->
      <el-form-item label="产地" prop="origin">
        <el-input v-model="formData.origin" placeholder="请输入产地信息" />
      </el-form-item>

      <!-- 生产日期 -->
      <el-form-item label="生产日期" prop="productionDate">
        <el-date-picker
          v-model="formData.productionDate"
          type="date"
          placeholder="选择生产日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <!-- 保质期 -->
      <el-form-item label="保质期" prop="shelfLife">
        <el-input v-model="formData.shelfLife" placeholder="例如：30天">
          <template #append>天</template>
        </el-input>
      </el-form-item>

      <!-- 商品描述 -->
      <el-form-item label="商品描述" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          :rows="4"
          placeholder="请输入商品详细描述"
        />
      </el-form-item>

      <!-- 价格 & 库存 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="价格（元）" prop="price">
            <el-input-number 
              v-model="formData.price" 
              :min="0" 
              :precision="2"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库存数量" prop="stock">
            <el-input-number
              v-model="formData.stock"
              :min="0"
              :precision="0"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 团购折扣 -->
      <el-form-item label="团购折扣（%）" prop="groupDiscount">
        <el-input-number
          v-model="formData.groupDiscount"
          :min="0"
          :max="100"
          :precision="2"
          controls-position="right"
          placeholder="请输入团购折扣"
        />
      </el-form-item>

      <!-- 商品图片 -->
      <el-form-item label="商品图片" prop="image">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :on-change="handleImageChange"
          :file-list="fileList"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-popconfirm 
          title="确定提交商品信息吗？" 
          @confirm="handleSubmit"
        >
          <template #reference>
            <el-button type="primary">提交商品</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElUpload, type UploadFile } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 表单数据类型
interface GoodsForm {
  name: string
  origin: string
  productionDate: string
  shelfLife: string
  description: string
  price: number | null
  stock: number | null
  image: File | null
  groupDiscount: number | null
}

// 表单数据
const formData = reactive<GoodsForm>({
  name: '',
  origin: '',
  productionDate: '',
  shelfLife: '',
  description: '',
  price: null,
  stock: null,
  image: null,
  groupDiscount: null
})

// 文件列表
const fileList = ref<UploadFile[]>([])
const formRef = ref()

// 表单验证规则
const formRules = reactive({
  name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  origin: [{ required: true, message: '请输入产地信息', trigger: 'blur' }],
  productionDate: [{ required: true, message: '请选择生产日期', trigger: 'change' }],
  shelfLife: [{ required: true, message: '请输入保质期', trigger: 'blur' }],
  price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
  stock: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
  image: [{ required: true, message: '请上传商品图片', trigger: 'change' }],
  groupDiscount: [{ required: true, message: '请输入团购折扣', trigger: 'blur' }]
})

// 图片上传处理
const handleImageChange = (file: UploadFile) => {
  formData.image = file.raw as File
}

// 提交表单
const handleSubmit = async () => {
  try {
    // 验证表单
    await formRef.value.validate()
    // 输出所有商品信息到控制台
    console.log('提交数据:', formData)
    
    // 显示自定义黄色提示
    ElMessage({
      message: '商品已提交，等待审核通过即可上架',
      type: 'warning',  // 使用warning类型显示黄色
      duration: 5000
    })

    // 重置表单
    formRef.value.resetFields()
    fileList.value = []
    formData.image = null
    formData.groupDiscount = null
  } catch (error) {
    // 表单验证失败，给出提示框
    ElMessage.error('请填写完整的商品信息')
  }
}
</script>

<style scoped>
.add-goods {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

:deep(.el-upload) {
  width: 100px;
  height: 100px;
}

:deep(.el-message--warning) {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}
</style>